//   rect
//   x="x-coordinate"        矩形左上角的 x 坐标
//   y="y-coordinate"        矩形左上角的 y 坐标
//   width="width-value"     矩形的宽度
//   height="height-value"   矩形的高度
//   rx="rx-value"           矩形的圆角半径（水平方向）
//   ry="ry-value"           矩形的圆角半径（垂直方向）
//   fill="fill-color"       矩形的填充颜色
//   stroke="stroke-color"   矩形的描边颜色
//   stroke-width="width-value" 矩形的描边宽度

/**
 * @param {d3.Selection} parent - D3 父元素容器（一般为 <svg> 或 <g> 元素）
 * @param {Object} options - 配置项
 * @param {number} options.x - 矩形左上角的 x 坐标
 * @param {number} options.y - 矩形左上角的 y 坐标
 * @param {number} options.width - 矩形的宽度
 * @param {number} options.height - 矩形的高度
 * @param {string} options.label - 中心显示的文本内容
 * @param {string} [options.fill="#EFF4FF"] - 矩形填充颜色
 * @param {string} [options.stroke="#5F95FF"] - 矩形边框颜色
 * @param {number} [options.rx] - 矩形水平圆角半径（可选）
 * @param {number} [options.ry] - 矩形垂直圆角半径（可选）
 * @param {string} [options.textColor="#262626"] - 文本颜色
 * @param {string} [options.fontFamily="Arial, sans-serif"] - 文本字体
 * @param {string|number} [options.fontSize="16px"] - 字体大小
 * @param {Object} [options.params] - 自定义参数对象
 *
 * @returns {d3.Selection} 创建的 <g> 元素，包含 rect、text 和 port 圆点
 */
export const createCustomRect = (parent, options) => {
  const g = parent
    .append("g")
    .attr("class", "draggable")
    .attr("data-label", options.label)
    .attr("data-type", "rect");

  // 将自定义参数存储到元素的 data 属性中
  if (options.params) {
    g.attr("data-params", JSON.stringify(options.params));
  }

  // if (options.data) {
  //   g.attr("data-custom", JSON.stringify(options.data));
  // }

  const rect = g
    .append("rect")
    .attr("x", options.x)
    .attr("y", options.y)
    .attr("width", options.width)
    .attr("height", options.height)
    .attr("fill", options.fill || "#EFF4FF")
    .attr("stroke", options.stroke || "#5F95FF");

  if (options.rx !== undefined) rect.attr("rx", options.rx);
  if (options.ry !== undefined) rect.attr("ry", options.ry);

  const cx = options.x + options.width / 2;
  const cy = options.y + options.height / 2;

  g.append("text")
    .attr("x", cx)
    .attr("y", cy)
    .text(options.label)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("fill", options.textColor || "#262626")
    .attr("font-family", options.fontFamily || "Arial, sans-serif")
    .attr("font-size", options.fontSize || "16px")
    .attr("pointer-events", "none");

  createPortCircles(g);

  return g;
};

/**
 * 创建一个自定义多边形（含文字和端口圈）
 *
 * @param {d3.Selection} parent - D3 父级容器（通常是 SVG 元素或 <g> 元素）
 * @param {Object} options - 配置选项对象
 * @param {string} options.points - 多边形的顶点坐标字符串，例如 "10,10 100,10 100,100 10,100"
 * @param {string} options.label - 中心显示的文字
 * @param {string} [options.fill="#EFF4FF"] - 填充颜色
 * @param {string} [options.stroke="#5F95FF"] - 边框颜色
 * @param {number} [options.strokeWidth=1] - 边框宽度
 * @param {string} [options.textColor="#262626"] - 文字颜色
 * @param {string} [options.fontFamily="Arial, sans-serif"] - 文字字体
 * @param {string|number} [options.fontSize="16px"] - 字体大小
 *
 * @returns {d3.Selection} - 返回创建的 polygon 所在的 <g> 元素（包含 polygon、text、以及端口）
 */
export const createCustomPolygon = (parent, options) => {
  const g = parent
    .append("g")
    .attr("class", "draggable")
    .attr("data-label", options.label)
    .attr("data-type", "polygon");

  g.append("polygon")
    .attr("points", options.points)
    .attr("fill", options.fill || "#EFF4FF")
    .attr("stroke", options.stroke || "#5F95FF")
    .attr("stroke-width", options.strokeWidth || 1);

  // 自动计算中心点（顶点平均值）
  const coords = options.points.split(" ").map((p) => {
    const [x, y] = p.split(",").map(Number);
    return { x, y };
  });

  const n = coords.length;
  const cx = coords.reduce((sum, p) => sum + p.x, 0) / n;
  const cy = coords.reduce((sum, p) => sum + p.y, 0) / n;

  // 添加居中文字
  g.append("text")
    .attr("x", cx)
    .attr("y", cy)
    .text(options.label)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("fill", options.textColor || "#262626")
    .attr("font-family", options.fontFamily || "Arial, sans-serif")
    .attr("font-size", options.fontSize || "16px")
    .attr("pointer-events", "none");

  createPortCircles(g);

  return g;
};

/**
 * @param {d3.Selection} parent - D3 父容器（通常是 <svg> 或 <g> 元素）
 * @param {Object} options - 配置对象
 * @param {number} options.cx - 圆心的 x 坐标
 * @param {number} options.cy - 圆心的 y 坐标
 * @param {number} options.r - 圆的半径
 * @param {string} options.label - 显示在圆中心的文字
 * @param {string} [options.fill="#EFF4FF"] - 圆的填充颜色
 * @param {string} [options.stroke="#5F95FF"] - 圆的边框颜色
 * @param {number} [options.strokeWidth=1] - 圆的边框宽度
 * @param {number} [options.textX=options.cx] - 文字的 x 坐标（默认与圆心对齐）
 * @param {number} [options.textY=options.cy] - 文字的 y 坐标（默认与圆心对齐）
 * @param {string} [options.textColor="#262626"] - 文字颜色
 * @param {string} [options.fontFamily="Arial, sans-serif"] - 字体样式
 * @param {string|number} [options.fontSize="16px"] - 字体大小
 *
 * @returns {d3.Selection} 返回创建的 <g> 元素，包含 circle、text 和 port 圆点
 */
export const createCustomCircle = (parent, options) => {
  const g = parent
    .append("g")
    .attr("class", "draggable")
    .attr("data-label", options.label)
    .attr("data-type", "circle");

  g.append("circle")
    .attr("cx", options.cx)
    .attr("cy", options.cy)
    .attr("r", options.r)
    .attr("fill", options.fill || "#EFF4FF")
    .attr("stroke", options.stroke || "#5F95FF")
    .attr("stroke-width", options.strokeWidth || 1);

  g.append("text")
    .attr("x", options.textX || options.cx)
    .attr("y", options.textY || options.cy)
    .text(options.label)
    .attr("text-anchor", "middle")
    .attr("dominant-baseline", "middle")
    .attr("fill", options.textColor || "#262626")
    .attr("font-family", options.fontFamily || "Arial, sans-serif")
    .attr("font-size", options.fontSize || "16px")
    .attr("pointer-events", "none");

  createPortCircles(g);

  return g;
};

export const sourceGraph = () => {
  return [
    {
      type: "rect",
      x: 20,
      y: 20,
      width: 66,
      height: 36,
      rx: 20,
      ry: 26,
      label: "开始",
      fill: "#EFF4FF",
      stroke: "#5F95FF",
    },
    {
      type: "rect",
      x: 106,
      y: 20,
      width: 66,
      height: 36,
      label: "过程",
      fill: "#EFF4FF",
      stroke: "#5F95FF",
    },
    {
      type: "rect",
      x: 20,
      y: 76,
      width: 66,
      height: 36,
      label: "可选过程",
      fill: "#EFF4FF",
      stroke: "#5F95FF",
    },
    {
      type: "polygon",
      points: "139,76 172,94 139,112 106,94",
      label: "决策",
      fill: "#EFF4FF",
      stroke: "#5F95FF",
    },
    {
      type: "polygon",
      points: "20,136 76,136 66,172 10,172",
      label: "数据",
      fill: "#EFF4FF",
      stroke: "#5F95FF",
    },
    {
      type: "circle",
      cx: 136,
      cy: 154,
      r: 22.5,
      label: "连接",
      fill: "#EFF4FF",
      stroke: "#5F95FF",
    },
  ];
};

/**
 * 在传入的图形 `<g>` 元素顶部和底部添加两个端口圆点（用于连接线或交互）
 *
 * 每个端口为一个半径为 4 的 `<circle>` 元素，带有 `data-port="top"` 和 `data-port="bottom"` 标识，
 * 默认样式为白底蓝边，初始 `visibility` 设置为 `"hidden"`。
 *
 * @param {d3.Selection} g - D3 选择器选中的 `<g>` 元素，必须包含图形（如 rect、circle、polygon）
 *
 * @returns {void}
 */
export function createPortCircles(g) {
  const bbox = g.node().getBBox();
  const cx = bbox.x + bbox.width / 2;
  const topY = bbox.y;
  const bottomY = bbox.y + bbox.height;

  g.append("circle")
    .attr("class", "port")
    .attr("data-port", "top")
    .attr("cx", cx)
    .attr("cy", topY)
    .attr("r", 4)
    .attr("fill", "white")
    .attr("stroke", "#5F95FF")
    .style("visibility", "hidden");

  g.append("circle")
    .attr("class", "port")
    .attr("data-port", "bottom")
    .attr("cx", cx)
    .attr("cy", bottomY)
    .attr("r", 4)
    .attr("fill", "white")
    .attr("stroke", "#5F95FF")
    .style("visibility", "hidden");
}

export function createMarkerDefs() {
  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");

  // 创建箭头标记
  const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
  marker.setAttribute("id", "arrowhead");
  marker.setAttribute("markerWidth", "10");
  marker.setAttribute("markerHeight", "7");
  marker.setAttribute("refX", "9");
  marker.setAttribute("refY", "3.5");
  marker.setAttribute("orient", "auto");
  marker.setAttribute("markerUnits", "strokeWidth");

  const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
  polygon.setAttribute("points", "0 0, 10 3.5, 0 7");
  polygon.setAttribute("fill", "#A2B1C3");

  marker.appendChild(polygon);
  defs.appendChild(marker);

  return defs;
}

export const createNodeShape = (svg, options = {}) => {
  const { type } = options;
  switch (type) {
    case "rect":
      return createCustomRect(svg, options);
    case "polygon":
      return createCustomPolygon(svg, options);
    case "circle":
      return createCustomCircle(svg, options);
    default:
      console.warn("Unknown shape type:", type);
      return null;
  }
};

// 获取目标 SVG 元素
// const targetSvgElement = targetSvg.node();
// if (!targetSvgElement) return;

// 将鼠标坐标转换为 targetSvg 内部坐标
// const pt = targetSvgElement.createSVGPoint();
// pt.x = event.sourceEvent.clientX;
// pt.y = event.sourceEvent.clientY;
// SVGMatrix，表示：从 SVG 当前坐标系 到 浏览器屏幕坐标系 的变换矩阵。
// inverse 逆矩阵变换 屏幕坐标转换成 SVG 坐标
// const svgP = pt.matrixTransform(
//   targetSvgElement.getScreenCTM().inverse()
// );
